import React from "react";
import "../../index.css";

// 导入图片
import imgUrl1 from "../../assets/images/tehui-01.jpg";
import imgUrl2 from "../../assets/images/tehui-02.jpg";
import imgUrl3 from "../../assets/images/tehui-03.jpg";
import imgUrl4 from "../../assets/images/tehui-04.jpg";

export default class TeHui extends React.Component {
    state = {
        tehuiData: [
            {
                id: 0,
                pic: imgUrl1,
                title: "泳池派对周边",
                overTime: "24天后结束",
            },
            {
                id: 1,
                pic: imgUrl2,
                title: "每周限时优惠",
                overTime: "已结束",
            },
            {
                id: 2,
                pic: imgUrl3,
                title: "每周限时优惠",
                overTime: "已结束",
            },
            {
                id: 3,
                pic: imgUrl4,
                title: "LPL耐克联名T恤",
                overTime: "1天后结束",
            },
        ],
    };

    onClick = (e) => {
        e.preventDefault();
    };

    render() {
        return (
            <ul>
                {this.state.tehuiData.map((item) => {
                    return (
                        <li className="act-item" key={item.id}>
                            <img src={item.pic} alt="" />
                            <p>{item.title}</p>
                            <a className="overtime" href="#!" onClick={this.onClick}>
                                {item.overTime}
                            </a>
                        </li>
                    );
                })}
            </ul>
        );
    }
}